<template>
  <div id="app">
    <router-view></router-view>

    <footer>
      <div>
        <router-link active-class="active" to="/index/focus">
          <i class="icon1"></i><p>首页</p>
        </router-link>
        <router-link active-class="active" to="/shop">
          <i class="icon3"></i><p>商城</p>
        </router-link>
        <router-link active-class="active" to="/collect">
          <i class="icon4"></i><p>收藏</p>
        </router-link>
        <router-link active-class="active" to="/home">
          <i class="icon5"></i><p>我的</p>
        </router-link>
      </div>
    </footer>
  </div>
  
</template>

<style lang="less" scoped>
@import './common/less/varible.less';
footer{
  position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    height: 60px;
    background-color: #f6c625;
  div{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    a{
      flex-basis: 33.33333%;
      flex-grow: 1;
      text-align: center;
      // 移除a标签在移动端的轻触高亮效果
      -webkit-tap-highlight-color: transparent;
      .icon1 {
        background-image: url(./assets/img/index.png);
      }
      .icon3 {
        background-image: url(./assets/img/shop.png);
      }
      .icon4{
        background-image: url(./assets/img/collect.png);
      }
      .icon5{
        background-image: url(./assets/img/home.png);
      }
      p{
        color: rgba(0,0,0,.5);
        font-size: 15px;
        font-family: cmfb;
      }
    }
    a.active{
      .icon1 {
        background-image: url(./assets/img/index_on.png);
      }
      .icon3 {
        background-image: url(./assets/img/shop_on.png);
      }
      .icon4{
        background-image: url(./assets/img/collect_on.png);
      }
      .icon5{
        background-image: url(./assets/img/home_on.png);
      }
      p{
        color: @Color;
      }
    }
  }
}
  

  [class^="icon"] {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: cover;
 }

</style>